var chartDom7 = document.getElementById("echarts7");
var myChart7 = echarts.init(chartDom7);
/* 数据 */
let allData = [];
var option7;
/* var legendBox = document.querySelector(".legend");
var num3 = document.querySelector(".num3");
var sliceRes = [];
var name7 = [];
var value7 = [];
var total7 = 0; */

function ajax7() {
  $.ajax({
    url: "/large-screen/frequent/selectFrequentPerson",
    type: "GET",
    crossDomain: true,
    dataType: "json",
    async: false,
    success: function (res) {
      // console.log(res);
      allData = JSON.parse(JSON.stringify(res.data.reverse()));
      /* total7 = res.data
        .map((item) => {
          return item.count;
        })
        .reduce((pre, cur) => {
          return pre + cur;
        }, 0);
      num3.innerHTML = total7;
      for (let i = 0; i < res.data.length; i++) {
        let legItem = document.createElement("li");
        let academy1 = document.createElement("span");
        let count1 = document.createElement("span");
        legItem.classList.add("legend-item");
        academy1.classList.add("academy");
        count1.classList.add("count");
        legendBox.appendChild(legItem);
        legItem.appendChild(academy1);
        legItem.appendChild(count1);
        academy1.innerText = res.data[i].academy;
        count1.innerText = res.data[i].count + "次";
      }
      var newRes = JSON.parse(JSON.stringify(res.data));
      sliceRes = newRes.splice(0, 5); */
      /* sliceRes.forEach((item) => {
        if (item.organizationCnName === "总数") {
          num2.innerText = item.count;
        }
      }) */
      /*  name7 = sliceRes.map((item) => {
         return item.academy;
       });
       value7 = sliceRes.map((item) => {
         return item.count;
       }); */
    },
    error: function (xhr, status) {
      console.log(status);
    },
  });
  option7 = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      formatter: function (params) {
        if (params[0].name === "船海与能源动力工程学...") {
          params[0].name = "船海与能源动力工程学院";
        }
        if (params[0].name === "化学化工与生命科学学...") {
          params[0].name = "化学化工与生命科学学院（艾克斯马赛学院）";
        }
        if (params[0].name === "材料科学与工程国际化...") {
          params[0].name = "材料科学与工程国际化示范学院（材料与微电子学院）";
        }
        if (params[0].name === "安全科学与应急管理学...") {
          params[0].name = "安全科学与应急管理学院";
        }
        if (params[0].name === "计算机与人工智能学院...") {
          params[0].name = "计算机与人工智能学院";
        }
        return params[0].name + "<br>次数:" + params[0].value;
      },
    },
    legend: {
      show: false,
    },
  
    grid: {
      top: "15%",
      left: "2%",
      right: "10%",
      bottom: "5%",
      containLabel: true,
    },
    // 加这块地方重点！！！！！！！
    dataZoom: [
      //滑动条
      {
        yAxisIndex: 0, //这里是从X轴的0刻度开始
        show: false, //是否显示滑动条，不影响使用
        type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
        startValue: 0, // 从头开始。
        endValue: 3, // 一次性展示4个。
      },
    ],
    xAxis: {
      type: "value",
      splitLine: {
        // show: true
        lineStyle: {
          color: "#3E4B56",
          type: "dashed",
        },
      },
      axisLabel: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
  
    yAxis: [
      {
        type: "category",
        name: "单位：次数",
        nameTextStyle: {
          color: "#FFFFFF",
          fontSize: 12,
          // nameLocation: "start",
          // padding: [0, 0, 300, 0],
        },
        // inverse: true,
        axisLine: {
          // show: false,
          lineStyle: {
            color: "#0D2435",
          },
        },
        axisTick: {
          show: false,
        },
        /* axisPointer: {
          label: {
            show: true
          }
        }, */
        axisLabel: {
          margin: 10,
          fontSize: 14,
          color: "#fff",
        },
        data: allData.map((item) => {
          if (item.academy.length >= 10) {
            item.academy = item.academy.substring(0, 10) + "...";
          }
          return item.academy;
        }),
      },
    ],
    series: [
      {
        z: 2,
        name: "次数:",
        type: "bar",
        // align: "left",
        showBackground: true,
        backgroundStyle: {
          color: "rgb(108, 128, 151,.1)",
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            1,
            0,
            0,
            0,
            [
              {
                offset: 1,
                color: "rgba(51, 204, 204, 0)",
              },
              {
                offset: 0,
                color: "#33CCCC",
              },
            ],
            false
          ),
        },
        //   barCategoryGap: '50%',
        data: allData.map((item) => item.count),
        /* .map((item, i) => {
            return {
              value: item,
              itemStyle: itemStyle
            };
          }) */ label: {
          normal: {
            show: true,
            position: "right",
            color: "#fff",
            fontSize: 14,
            textShadowColor: "#9DC8FF",
            textShadowBlur: 5,
            formatter: function (params) {
              // let val = (value && value.data && value.data.value) || 0;
              return params.value;
            },
          },
        },
      },
    ],
  };
  option7 && myChart7.setOption(option7);
}

ajax7()

autoMove7();

function autoMove7() {
  // 自动滚动：
  timeOut7 = setInterval(() => {
    if (option7.dataZoom[0].endValue == allData.length) {
      option7.dataZoom[0].endValue = 3;
      option7.dataZoom[0].startValue = 0;
    } else {
      option7.dataZoom[0].endValue = option7.dataZoom[0].endValue + 1;
      option7.dataZoom[0].startValue = option7.dataZoom[0].startValue + 1;
    }
    myChart7.setOption(option7);
    myChart7.on("mouseover", stop7);
    myChart7.on("mouseout", goMove7);
  }, 2000);
}
//停止滚动
function stop7() {
  clearInterval(timeOut7);
}
//继续滚动
function goMove7() {
  autoMove7();
}
setInterval(() => {
  ajax7()
}, 7200000);

